<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>LTMALL-个人信息</title>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="/css/all.min.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="/img/Favicon.ico">
		<link rel="stylesheet" type="text/css" href="/css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.min.css">
		<link rel="stylesheet" type="text/css" href="/css/style.css">
		<link rel="stylesheet" type="text/css" href="/css/media.css">
		<link rel="stylesheet" type="text/css" href="/css/responsive.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.carousel.css">
		<link rel="stylesheet" type="text/css" href="/css/magnific-popup.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.css">
		<link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="/css/public.css" media="all">
		<link rel="stylesheet" type="text/css" href="/css/personal.css"/>
		<link rel="stylesheet" type="text/css" href="/css/mygrxx.css" />
		<style>
			.personalImg{
				text-align: center;
				height: auto;
				width: auto;
				white-space: normal;
				max-height: 80px;
				max-width: 90px;
				border-radius:50%;
				border: 1px solid salmon;
			}
			.personalInfoImg{
				text-align: center;
				height: auto;
				width: auto;
				white-space: normal;
				max-height: 90px;
				max-width: 90px;
				border-radius:50%;
				border: 1px solid salmon;
			}
		</style>
	</head>
	<body>

	<th:block th:include="header"/>

		<div class="Bott">
			<div class="wrapper clearfix">
				<th: block th:include="personalHeader"/>
				<div class="you fl">
					<h2>个人信息</h2>
					<div class="gxin">
						<div class="tx">
							<a href="#">
								<img th:src="${currentMember.avatar}" class="personalInfoImg"/>
								<p id="updateAvatar">点击可修改</p>
							</a>
						</div>
						<div class="xx">
							<h3 class="clearfix"><strong class="fl">基础资料</strong><a href="#" class="fr" id="edit1">编辑</a></h3>
							<div>
								<span style="display: inline-block">账号:</span>
								<span style="display: inline-block" th:text="${currentMember.accountNumber}"></span>
							</div>
							<div>
								<span style="display: inline-block">姓名:</span>
								<span style="display: inline-block" th:text="${currentMember.username}"></span>
							</div>
							<div>
								<span style="display: inline-block">性别:</span>
								<span style="display: inline-block" th:text="${currentMember.sex}"></span>
							</div>
							<div>
								<span style="display: inline-block">生日:</span>
								<span style="display: inline-block" th:text="${currentMember.birthday}"></span>
							</div>
							<div>
								<span style="display: inline-block">绑定电话:</span>
								<span style="display: inline-block" th:text="${currentMember.phone}"></span>
							</div>

							<h3>高级设置</h3>
							<div><span class="fl">银行卡</span><a href="#" class="fr">管理</a></div>
						</div>
					</div>			
				</div>
			</div>
		</div>

	<!--定义编辑个人资料时弹出窗口的模版-->
	<script id="personalInfoTemplate" type="text/html">
		<form class="layui-form" lay-filter="personalInfoForm">
			<div class="layui-form-item">
			<label class="layui-form-label">账号:</label>
			<div class="layui-input-inline">
				<div class="layui-input-inline">
					<input type="hidden" name="id" >
					<input id="accountNumber" type="text" name="accountNumber" class="layui-input" >
				</div>
			</div>

			<label class="layui-form-label">姓名:</label>
			<div class="layui-input-inline">
				<div class="layui-input-inline">
					<input id="username" type="text" name="username" class="layui-input" >
				</div>
			</div>
			</div>

			<div class="layui-form-item">
			<label class="layui-form-label">性别:</label>
			<div class="layui-input-inline">
				<div class="layui-input-inline">
					<input id="sex" type="text" name="sex" class="layui-input" >
				</div>
			</div>
			<label class="layui-form-label">生日:</label>
			<div class="layui-input-inline">
				<div class="layui-input-inline">
					<input id="birthday" type="text" name="birthday" class="layui-input" placeholder="yyyy-MM-dd">
				</div>
			</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button id="saveBtn" type="button" class="layui-btn" style="position: center">保存</button>
					<button type="reset" class="layui-btn layui-btn-primary" style="position: center">重置</button>
				</div>
			</div>
		</form>
	</script>
	<!--定义修改头像时弹出窗口的模版-->
	<script id="updateAvatarTemplate" type="text/html">
		<div class="layui-inline">
			<div class="layui-form-item">
			<div class="layui-input-inline">
				<img id="avatar" width="50px" height="50px" src="">
				<input type="hidden" name="avatar" id="avatarAddress">
				<label class="layui-form-label" style="width: auto">点击头像以获取本地资源</label>
			</div>
			</div>
			<br>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button id="avatarSaveBtn" type="button" class="layui-btn" style="position: center">保存</button>
				</div>
			</div>
		</div>
	</script>
	<th:block th:include="end"/>
		<script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/user.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/jquery-3.4.1.min.js"></script>
	<script src="/js/owl.carousel.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/jquery.magnific-popup.js"></script>
	<script src="/js/popper.min.js"></script>
	<script src="/js/all.min.js"></script>
	<script src="/js/index.js"></script>
	<script src="/js/wow.min.js"></script>

	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
	<script>
		layui.use([ 'form', 'table', 'layer','laydate','upload' ], function() {
			var $ = layui.jquery, form = layui.form;
			var table = layui.table;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var upload = layui.upload;

			$("#edit1").on("click",function (){
				$.post("/personalInfo/currentMemberInfo",function (memberInfo){
					layer.open({
						type: 1,
						title: "新增地址",
						area: ["700px", "300px"],
						content: $("#personalInfoTemplate").html(),
					});
					laydate.render({
						elem : '#birthday' //指定元素
					});
					form.val("personalInfoForm",memberInfo);
				});
			});
			//保存按钮绑定事件
			$("body").on("click", "#saveBtn", function () {
				var data = form.val("personalInfoForm");
				//先判断一下账号是否重复
				$.post("/personalInfo/accountNumber?accountNumber="+data.accountNumber,function (account){
					if(account==""){//说明没有重复
						$.post("/personalInfo/saveMemberInfo", data, function () {
							window.location.href="/personalInfo/personalInfoPage";
						});
					}else{
						layer.msg("账号重复,请重新设置!");
					}

				});
			});
			//给修改头像按钮绑定事件
			$("#updateAvatar").on("click",function (){
				$.post("/personalInfo/selectCurrentAvatar",function (m){
					layer.open({
						type: 1,
						title: "修改头像",
						area: ["400px", "300px"],
						content: $("#updateAvatarTemplate").html(),
					});
					$("#avatar").attr("src", m);
					upload.render({
						elem: '#avatar' //绑定元素
						, url: '/personalInfo/avatar' //上传接口
						, done: function (res) {
							if (res.code == 0) {
								$("#avatarAddress").val(res.data.avatar);
								$("#avatar").attr("src", res.data.avatar);
							}
						}
						, error: function () {
							//请求异常回调
						}
					});
					//给头像报存按钮绑定事件
					$("#avatarSaveBtn").on("click",function (){
						$.post("/personalInfo/updateMemberAvatar?avatar="+$("#avatarAddress").val(),function (){
							window.top.location.href="/personalInfo/personalInfoPage";
						});
					});
				});
			});
		});
	</script>
	</body>
</html>
